import React, { ReactNode } from 'react';

export function ThreeSpanLayout({
  children,
  totalWidth,
  leftWidth = 128,
  rightWidth = 350,
}: {
  children?: ReactNode | ReactNode[];
  totalWidth: number;
  // 右边宽度
  leftWidth?: number;
  // 左边宽度
  rightWidth?: number;
}) {
  const childs = React.Children.toArray(children);

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'stretch',
        borderTop: '1px solid #E5E5E5',
        borderBottom: '1px solid #E5E5E5',
        height: '100%',
        width: '100%',
        overflow: 'hidden',
      }}
    >
      <div style={{ width: leftWidth, boxSizing: 'border-box', borderRight: '1px solid #E5E5E5', overflow: 'hidden' }}>
        {childs?.[0]}
      </div>
      <div style={{ width: totalWidth - leftWidth - rightWidth - 48 }}>{childs?.[1]}</div>
      <div style={{ width: rightWidth, boxSizing: 'border-box', borderLeft: '1px solid #E5E5E5' }}>{childs?.[2]}</div>
    </div>
  );
}
